    

//render 属性和children component 区别是啥？

// render 属性的作用 状态发生变化的时候 不会频繁的触发组件的componentDidMount和componentWillUnmount
//children 属性不需要路径匹配   render 和 component 都需要路径匹配

// react传递的字段你可以随便定义

//一般情况下 组件通过route区配成功之后追自动注入match location history  三个属性到props中
// Base 当前的组件 没有通过route进行匹配  拿不到history对象 无法编程式

import React from 'react'
import {HashRouter as Router , Link ,Route, withRouter,Switch } from "react-router-dom"
import Ho from "./Ho"
import My from './My'

import Friend from './Friend'
@withRouter


        class Base extends React.Component{
                state = {
                        name:"野结衣"
                }
                handClick = ()=>{
                        this.setState({
                                name:"唱跳"
                        })
                }
                //编程式导航
                handleJump= ()=>{
                        //直接传入路径
                        // this.props.history.push("/Ho")
                        //传递对象   传递参数
                        this.props.history.push({pathname:"/Ho",query:{hobby:"你好"} ,state:{name:'李白'}})
                }
                render(){
                        console.log(this.props);
                        
                        return(
                            
                                <fieldset>
                                        <legend>Base</legend>
                                        <ul>
                                                <li>
                                                        <Link to = "/Ho">主页</Link>
                                                </li>
                                                <li>
                                                        <Link to = "/My">我的</Link>
                                                </li>
                                                <li>
                                                        {/* <Link to = "/Friend?age=22">鸡王</Link> */}
                                                        <Link to = {{pathname:"/Friend",query:{age:18}}}>鸡王</Link>

                                                </li>
                                        </ul>
                                        <button onClick = {this.handleJump}>帅气的按钮</button>

                                        <Switch>
                                        <Route path = "/Ho" render = {(props)=>
                                        <Ho {...props}></Ho>
                                        }>
                                                
                                        </Route>
                                        <Route path = "/My">
                                                <My></My>
                                        </Route>
                                        <Route path = "/Friend" render={(props)=>
                                                <Friend  name = {this.state.name} {...props} ></Friend>
                                        }>
                                                
                                        </Route>
                                        </Switch>
                                        <button onClick={this.handClick}>点击</button>
                                </fieldset>
                             
                                
                        )
                }
        }
        export default Base